<template>
  <div class="about container">
    <h2>{{ data.title }}</h2>
    <el-row class="content">
      <div class="markdown-body" v-html="data.content"></div>
    </el-row>
  </div>
</template>
<script>
import {marked} from 'marked'
import hljs from 'highlight.js'

marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    highlight (code) {
        return hljs.highlightAuto(code).value;
    }
});
export default {
  name: 'AboutDom',
  transition: 'bounce',
  
  data() {
    return {
      data: {}
    }
  },
  watch: {
  },
  mounted() {
    this.getAbout();
  },
  methods: {
    getAbout() {
      this.$Api.getAbout().then((res => {
        this.data = res.data
        this.data.content = marked.parse(this.data.content)
      })).catch(() => {
        this.$message({ type: 'error', message: '加载失败!', showClose: true })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.about {
  width: 70%;
  margin: 0 auto;
  box-sizing: border-box;

  h2 {

    line-height: 100px;
    color: #555;
    font-weight: 500;
    text-align: center;
  }

  .content {
    color: #555;
    line-height: 2.5;
    font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
  }

}
</style>